import React, { Component } from 'react'
import "./access.css"
import { Button, Table, Space } from 'antd';
import { FilterFilled, DeleteFilled, PlusCircleFilled, RightSquareFilled } from '@ant-design/icons';
export default class AccessClass extends Component {


    constructor() {
        super();
        this.state = {
            index: 0, //子菜单被选中的角标
            size: "large", //按钮尺寸
            selectedRowKeys: [], // 被选中的选项
        }
    }


    render() {
        const { index, size, selectedRowKeys } = this.state;
        const columns = [
            {
                title: 'City',
                dataIndex: 'city',
                width: 100, //宽度
                // 排序
                filters: [
                    {
                        text: 'india',
                        value: 'india',
                    },
                    {
                        text: 'china',
                        value: 'china',
                    },
                    // 二级筛选
                    // {
                    //     text: 'Submenu',
                    //     value: 'Submenu',
                    //     children: [
                    //         {
                    //             text: 'Green',
                    //             value: 'Green',
                    //         },
                    //         {
                    //             text: 'Black',
                    //             value: 'Black',
                    //         },
                    //     ],
                    // },
                ],
                // specify the condition of filtering result
                // here is that finding the name started with `value`
                onFilter: (value, record) => record.name.indexOf(value) === 0,
                sorter: (a, b) => a.name.length - b.name.length,
                sortDirections: ['descend'],
            },
            {
                title: 'Train Line',
                dataIndex: 'trainLine',
                width:150, //宽度
                defaultSortOrder: 'descend',
                sorter: (a, b) => a.age - b.age,
            },
            {
                title: 'Maintenance Team',
                dataIndex: 'maintenanceTeam',
                // 要赛选的内容
                filters: [
                    {
                        text: 'London',
                        value: 'London',
                    },
                    {
                        text: 'New York',
                        value: 'New York',
                    },
                ],
                onFilter: (value, record) => record.address.indexOf(value) === 0,
            },
            {
                title: 'Team Leader',
                dataIndex: 'teamLeader',
                // 要赛选的内容
                filters: [
                    {
                        text: 'London',
                        value: 'London',
                    },
                    {
                        text: 'New York',
                        value: 'New York',
                    },
                ],
                onFilter: (value, record) => record.address.indexOf(value) === 0,
            },
            {
                title: 'Team Size',
                dataIndex: 'teamSize',
                // 要赛选的内容
                filters: [
                    {
                        text: 'London',
                        value: 'London',
                    },
                    {
                        text: 'New York',
                        value: 'New York',
                    },
                ],
                onFilter: (value, record) => record.address.indexOf(value) === 0,
            },
            {
                title: 'Create By',
                dataIndex: 'createBy',
                // 要赛选的内容
                filters: [
                    {
                        text: 'London',
                        value: 'London',
                    },
                    {
                        text: 'New York',
                        value: 'New York',
                    },
                ],
                onFilter: (value, record) => record.address.indexOf(value) === 0,
            },
            {
                title: 'Create Date',
                dataIndex: 'createDate',
                // 要赛选的内容
                filters: [
                    {
                        text: 'London',
                        value: 'London',
                    },
                    {
                        text: 'New York',
                        value: 'New York',
                    },
                ],
                onFilter: (value, record) => record.address.indexOf(value) === 0,
            },
            {
                title: 'User',
                dataIndex: 'user',
               
            },
            {
                title: 'Action',
                dataIndex: 'action',
               
            },
        ];
        const data = [
            {
                key: '1',
                name: 'John Brown',
                age: 32,
                address: 'New York No. 1 Lake Park',
            },
            {
                key: '2',
                name: 'Jim Green',
                age: 42,
                address: 'London No. 1 Lake Park',
            },
            {
                key: '3',
                name: 'Joe Black',
                age: 32,
                address: 'Sidney No. 1 Lake Park',
            }
        ];



        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
            selections: [
                Table.SELECTION_ALL,
                Table.SELECTION_INVERT,
                Table.SELECTION_NONE,
                {
                    key: 'odd',
                    text: 'Select Odd Row',
                    onSelect: changableRowKeys => {
                        let newSelectedRowKeys = [];
                        newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                            if (index % 2 !== 0) {
                                return false;
                            }
                            return true;
                        });
                        this.setState({ selectedRowKeys: newSelectedRowKeys });
                    },
                },
                {
                    key: 'even',
                    text: 'Select Even Row',
                    onSelect: changableRowKeys => {
                        let newSelectedRowKeys = [];
                        newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                            if (index % 2 !== 0) {
                                return true;
                            }
                            return false;
                        });
                        this.setState({ selectedRowKeys: newSelectedRowKeys });
                    },
                },
            ],
        };


        return (
            <div className='access-pages'>
                <nav className='access-page-nav'>
                    <div class={index == 0 ? 'className2' : 'access-page-nav-options'} onClick={() => this.navClick(0)} >Team Management</div>
                    <div class={index == 1 ? 'className2' : 'access-page-nav-options'} onClick={() => this.navClick(1)}  >User Management</div>
                </nav>

                <div className="table-box">
                    <header className='access-table-header'>
                        <div className='access-table-header-tit'>Team Management</div>
                        <div>

                            <Button type="default" icon={<FilterFilled />} size={size} >Filter</Button>

                            <Button type="default" icon={<RightSquareFilled />} size={size} >Export</Button>

                            <Button type="default" icon={<PlusCircleFilled />} size={size} >Add</Button>

                            <Button type="default" className='deleteBtn' icon={<DeleteFilled />} size={size} >Delete</Button>
                        </div>

                    </header>

                    <Table rowSelection={rowSelection} columns={columns} dataSource={data} scroll={{  y: 600 }}/>;
                </div>

            </div>
        )
    }

    // 被选中的选项
    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };


    navClick(data) {
        console.log(data, '这是myClick方法')
        this.setState({
            index: data
        })
    }
}
